console.log('打印结果~~引入js成功',)
// 搜索选择组件
const SearchSelectComponent = {
    name: 'SearchSelectComponent',
    template: `
    <div class="search-select-container" v-if="visible">
        <div class="search-select-overlay" @click="handleClose"></div>
        <div class="search-select-wrapper">
            <div class="search-select-header">
                <h3 class="search-select-title">{{ title }}</h3>
                <button class="search-select-close" @click="handleClose">×</button>
            </div>
            
            <div class="search-select-search">
                <input 
                    type="text" 
                    v-model="searchText" 
                    :placeholder="placeholder"
                    class="search-select-input"
                    @input="handleSearch"
                />
                <button 
                    v-if="searchText" 
                    class="search-select-clear"
                    @click="clearSearch"
                >
                    ✕
                </button>
            </div>
            
            <div class="search-select-list">
                <div 
                    v-for="(item, index) in filteredData" 
                    :key="index"
                    class="search-select-item"
                    :class="{ 'search-select-item-active': isSelected(item) }"
                    @click="toggleSelect(item)"
                >
                    <div class="search-select-item-content">
                        {{ getItemText(item) }}
                    </div>
                    <div v-if="multiple" class="search-select-item-checkbox">
                        <div class="checkbox" :class="{ checked: isSelected(item) }">
                            <div v-if="isSelected(item)" class="checkbox-inner">✓</div>
                        </div>
                    </div>
                </div>
                <div v-if="filteredData.length === 0" class="search-select-empty">
                    {{ emptyText }}
                </div>
            </div>
            
            <div class="search-select-footer">
                <button class="search-select-button search-select-cancel" @click="handleClose">
                    {{ cancelText }}
                </button>
                <button class="search-select-button search-select-confirm" @click="handleConfirm" :disabled="selectedItems.length === 0">
                    {{ confirmText }} 
                </button>
            </div>
        </div>
    </div>
  `,
    //   ({{ selectedItems.length }})
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        data: {
            type: Array,
            required: true,
            default: function () { return [] }
        },
        selectedData: {
            type: Array,
            default: function () { return [] }
        },
        title: {
            type: String,
            default: '选择数据'
        },
        placeholder: {
            type: String,
            default: '请输入搜索内容'
        },
        emptyText: {
            type: String,
            default: '未找到匹配的数据'
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        confirmText: {
            type: String,
            default: '确认'
        },
        labelKey: {
            type: String,
            default: 'value'
        },
        keyField: {
            type: String,
            default: 'text'
        },
        multiple: {
            type: Boolean,
            default: true
        },
        resetOnClose: {
            type: Boolean,
            default: false
        }
    },
    data: function () {
        return {
            searchText: '',
            selectedItems: []
        }
    },
    computed: {
        filteredData: function () {
            if (!this.searchText) {
                return this.data;
            }
            const searchLower = this.searchText.toLowerCase();
            return this.data.filter(item => {
                const itemText = this.getItemText(item).toLowerCase();
                return itemText.includes(searchLower);
            });
        }
    },
    watch: {
        selectedData: function () {
            this.syncSelectedItems();
        },
        visible: function (newVal) {
            if (newVal) {
                this.syncSelectedItems();
                this.searchText = '';
            } else if (this.resetOnClose) {
                this.resetState();
            }
        }
    },
    methods: {
        getItemText: function (item) {
            if (typeof item === 'object' && item !== null) {
                return item[this.labelKey] || JSON.stringify(item);
            }
            return String(item);
        },

        syncSelectedItems: function () {
            if (!this.selectedData || this.selectedData.length === 0) {
                this.selectedItems = [];
                return;
            }

            this.selectedItems = this.data.filter(item => {
                return this.selectedData.some(selectedItem => {
                    if (typeof item === 'object' && typeof selectedItem === 'object' && item !== null && selectedItem !== null) {
                        return item[this.keyField] === selectedItem[this.keyField];
                    }
                    return item === selectedItem;
                });
            });
        },

        isSelected: function (item) {
            if (typeof item === 'object' && item !== null) {
                return this.selectedItems.some(selected => {
                    return selected[this.keyField] === item[this.keyField];
                });
            }
            return this.selectedItems.includes(item);
        },

        toggleSelect: function (item) {
            if (this.multiple) {
                // 多选模式
                const isCurrentlySelected = this.isSelected(item);

                if (isCurrentlySelected) {
                    // 取消选择
                    this.selectedItems = this.selectedItems.filter(selected => {
                        if (typeof selected === 'object' && selected !== null && typeof item === 'object' && item !== null) {
                            return selected[this.keyField] !== item[this.keyField];
                        }
                        return selected !== item;
                    });
                } else {
                    // 添加选择
                    this.selectedItems.push(item);
                }
            } else {
                // 单选模式
                this.selectedItems = [item];
            }
        },

        handleSearch: function () {
            this.$emit('search', this.searchText);
        },

        clearSearch: function () {
            this.searchText = '';
            this.$emit('search', '');
        },

        handleConfirm: function () {
            this.$emit('confirm', [...this.selectedItems]);
        },

        handleClose: function () {
            this.$emit('close');
        },

        resetState: function () {
            this.searchText = '';
            this.selectedItems = [];
        }
    }
};

// 添加默认样式
const styleId = 'search-select-component-style';
if (!document.getElementById(styleId)) {
    const style = document.createElement('style');
    style.id = styleId;
    style.textContent = `
    /* 遮罩层 */
    .search-select-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    /* 组件容器 */
    .search-select-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 组件主体 */
    .search-select-wrapper {
        width: 90%;
        max-width: 500px;
        max-height: 80vh;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: column;
        z-index: 1001;
    }
    
    /* 头部 */
    .search-select-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #eee;
    }
    
    .search-select-title {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        color: #333;
    }
    
    .search-select-close {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #999;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: all 0.3s ease;
    }
    
    .search-select-close:hover {
        background: #f5f5f5;
        color: #666;
    }
    
    /* 搜索框 */
    .search-select-search {
        padding: 16px 20px;
        border-bottom: 1px solid #eee;
        position: relative;
    }
    
    .search-select-input {
        width: 100%;
        padding: 10px 40px 10px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        transition: border-color 0.3s ease;
        box-sizing: border-box;
    }
    
    .search-select-input:focus {
        outline: none;
        border-color: #409eff;
    }
    
    .search-select-clear {
        position: absolute;
        right: 28px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #999;
        cursor: pointer;
        font-size: 12px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .search-select-clear:hover {
        background: #f5f5f5;
        color: #666;
    }
    
    /* 列表 */
    .search-select-list {
        flex: 1;
        overflow-y: auto;
        max-height: 300px;
    }
    
    .search-select-list::-webkit-scrollbar {
        width: 6px;
    }
    
    .search-select-list::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .search-select-list::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    
    .search-select-list::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* 列表项 */
    .search-select-item {
        padding: 12px 20px;
        cursor: pointer;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color 0.2s ease;
    }
    
    .search-select-item:last-child {
        border-bottom: none;
    }
    
    .search-select-item:hover {
        background: #f5f5f5;
    }
    
    .search-select-item-active {
        background: #ecf5ff !important;
        color: #409eff;
    }
    
    .search-select-item-content {
        flex: 1;
        font-size: 14px;
    }
    
    /* 多选框样式 */
    .search-select-item-checkbox {
        margin-left: 12px;
    }
    
    .checkbox {
        width: 18px;
        height: 18px;
        border: 1px solid #ddd;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .checkbox.checked {
        background: #409eff;
        border-color: #409eff;
        color: #fff;
    }
    
    .checkbox-inner {
        font-size: 12px;
        font-weight: bold;
    }
    
    /* 空状态 */
    .search-select-empty {
        padding: 40px 16px;
        text-align: center;
        color: #999;
        font-size: 14px;
    }
    
    /* 底部按钮区 */
    .search-select-footer {
        display: flex;
        justify-content: flex-end;
        padding: 16px 20px;
        border-top: 1px solid #eee;
        gap: 12px;
    }
    
    .search-select-button {
        padding: 8px 20px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
    }
    
    .search-select-button:hover:not(:disabled) {
        border-color: #409eff;
        color: #409eff;
    }
    
    .search-select-cancel {
        background: #fff;
    }
    
    .search-select-confirm {
        background: #409eff;
        color: #fff;
        border-color: #409eff;
    }
    
    .search-select-confirm:hover:not(:disabled) {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
    }
    
    .search-select-confirm:disabled {
        background: #ccc;
        border-color: #ccc;
        cursor: not-allowed;
        color: #fff;
    }
    
    /* 响应式适配 */
    @media (max-width: 768px) {
        .search-select-wrapper {
            width: 95%;
            margin: 20px;
        }
        
        .search-select-header,
        .search-select-search,
        .search-select-footer {
            padding: 12px 16px;
        }
        
        .search-select-item {
            padding: 10px 16px;
        }
    }
    `;
    document.head.appendChild(style);
}

// 暴露组件到全局
window.SearchSelectComponent = SearchSelectComponent;

// 提供自动注册函数
window.registerSearchSelectComponent = function () {
    if (window.Vue) {
        Vue.component('SearchSelectComponent', SearchSelectComponent);
        console.log('SearchSelectComponent组件已注册');
    } else {
        console.error('Vue未加载，无法注册组件');
    }
};
